<template>
  <div class="main">
    <div class="table">
      <div class="title">登录</div>
      <div class="content flex between">
        <div class="content-left form">
            <div class="lable">账号密码登录</div>
            <el-input v-model="input" placeholder="输入手机号/账号" />
            <div class="lable"></div>
            <el-input v-model="input" placeholder="请输入密码" />
             <div class="tab">刷卡或人脸识别登录</div>
            <div class="login-btn">登录</div>
        </div>
        <div class="content-right">
            <img src="@/assets/login/img.png">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        input:''
    };
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.main {
  padding: 22px 413px 213px;
  .table {
    border-radius: 8px;
    background: white;
    padding-bottom: 30px;
    .title {
      background: linear-gradient(to right, #56abf9, #5686fc);
    }
    .content{
        padding:61px 20px 54px 62px;
        .content-left{
            width: 50%;
            .lable{
                color: #5695FA;
                font-size: 28px;
                margin-bottom: 20px;
            }
            .tab{
                color: #5695FA;
                font-size: 28px;
                margin-top: 60px;
                text-decoration: underline;
            }
            .login-btn{
                background: #FF8C00;
                color: white;
                border-radius: 8px;
                text-align: center;
                padding: 6px 0;
                margin-top: 20px;
            }
        }
        .content-right{
            img{
                width: 572px;
            }
        }
    }
   
  }
}
</style>